{% extends "base.html" %}

{% block head %}
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var table_data = [{{point_names|json_dumps|safe}}];
        table_data = table_data.concat([
          {% for row in data -%}
            [
            {%- for point in row -%}
              {%- if loop.first -%}
                new Date({{point * 1000}})
              {%- else -%}
                {{point|safe}}
              {%- endif -%}

              {%- if not loop.last %},{% endif -%}
            {%- endfor -%}
            ]
            {%- if not loop.last %},{% endif -%}
          {%- endfor %}
          ]);
        var data = google.visualization.arrayToDataTable(table_data);

        {% for sub_graph, ticks in graph_ticks %}
          var options_{{sub_graph}} = {
            title: '{{graph_name}} - {{sub_graph}}',

            hAxis: {
                title: 'Time',
                titleTextStyle: {
                    color: '#333'
                },
                minorGridlines: {
                    count: 5,
                },
                slantedText: true,
                ticks: {{ticks|json_dumps|replace('"', '')|safe}},
                viewWindow: {
                  min: {{ticks[0]}},
                  max: {{ticks[-1]}}
                }
            },

            vAxis: {
                title: '{{graph_y}}',
                minValue: 0,
                minorGridlines: {
                    count: 5,
                }
                {% if graph.log_scale %},logScale: true{% endif %}
            },

            {% if graph.stats %}
            intervals: { 'style':'line' },
            {% endif %}
          };

          var chart_{{sub_graph}} = new google.visualization.LineChart(
              document.getElementById('chart_div_{{sub_graph}}'));
          chart_{{sub_graph}}.draw(data, options_{{sub_graph}});
        {% endfor %}
      }
    </script>
{% endblock head %}

{% block body %}
  {% for sub_graph, ticks in graph_ticks %}
    <div id="chart_div_{{sub_graph}}" style="width: 900px; height: 500px;"></div>
  {% endfor %}
{% endblock body %}